<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			/* 外边距margin属性 */
			img{
				border:1px solid red;
				/* margin：1个属性值  顺时针： 上 右 下 左 */
				margin:100px ;
				/* margin：2个属性值  顺时针： 上 下 右 左 */
				margin:100px 50px ;
				/* 常用：盒子自适应居中 ---失效
				    行内块：可以设置高宽、在一行内显示、无法居中，
				margin属性：【微调：文字或者图片】
				      使用问题1： 自适应居中，建议使用div，套块元素、行块内元素、行内元素，必须设置宽度
				      使用问题2： 行元素，上下外边距失效  右左外边距---
					  行元素：不可以设置高宽【高---不可以动上下】、在一行内显示【宽---可以左右】
					  使用问题3：垂直外边距
					  使用问题4：垂直外边距
					   */
				width: 50%;
				margin:0 auto;
				/* margin：3个属性值  顺时针： 上 右 左下 */
				mar gin:100px 200px 300px;
				/* margin：4个属性值  顺时针： 上 右 下 左 */
				mar gin: 100px 200px 300px 400px;
			}
			h1{
				/* 常用：盒子自适应居中 
				 块元素：不可以设置高宽、在一行内显示、无法居中，内置文本*/
				width: 100%;
				border: 1px solid red;
				margin:0 atuo;
				text-align: center;
			}
			span{
				/* 常用：盒子自适应居中
				 行元素：不可以设置高宽【高---不可以动上下】、在一行内显示【宽---可以左右】、无法居中，内置文本
				 text-align:center;
				*/
				width: 100%;
				border: 1px solid red;
				margin:0 atuo;
				text-align: center;
			}
			
			div{
				width: 200px;
				height: 200px;
				background: red;
				margin:0 auto;
				
			}
		</style>
	</head>
	<body>
		<!-- 框模型、盒子模型：四个部分组成，		                    外边距：边框以外四周，叫做外边距
							margin属性
							边框：
							内边距：边框以内 与内容 之间距离，叫做内边距
							内容：块、行、行内元素本身宽高
		所有元素存在于框模型中					-->
		<h1>块级元素</h1>
		<img src="img/大骚圣诞树.png" width="300px" height="300px" alt="圣诞" />
		<span>行内元素：圣诞</span>
		<div></div>
	</body>
</html>